<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue_2.5.22.js"></script>
  <script src="lib/vue-router_3.0.2.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #app {
      width: 100%;
      height: 100%;
    }

    #app {
      display: flex;
    }

    .sidebar_left {
      float: left;
      width: 100px;
      height: 100%;
      background-color: cornflowerblue;
    }

    .sidebar_left ul li {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: left;
      padding-left: 15px;
      cursor: pointer;
      border-top: 1px solid #eee;
    }

    .content_right {
      float: left;
      flex: 1;
      background-color: #eee;
    }

    li {
      list-style: none;
    }

    .sb {
      width: 800px;
      height: 30px;
    }


    .sb li {
      box-sizing: border-box;
      border: 1px solid #ccc;
      cursor: pointer;
      text-align: center;
      width: 50%;
      line-height: 30px;
      float: left;
    }
  </style>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script>
    const App = {
      template: `
      <div>
        <div class="sidebar_left">
          <ul>
              <router-link tag='li' to='/homePage'>首页</router-link>
              <router-link tag='li' to='/commodity'>商品</router-link>
              <router-link tag='li' to='/setUp'>设置</router-link>
          </ul>
         
        </div>
        <div class="content_right">
            <router-view />
        </div>
  
      </div>
      `
    }
    const HomePage = {
      template: `<div><h3>欢迎进入</h3></div>`
    }
    const Commodity = {
      data() {
        return {
          list: [
            { id: 1, name: '鞋子' },
            { id: 2, name: '袜子' },
            { id: 3, name: '腰带' },
          ]
        }
      },
      template: `
        <div>
        <ul v-for='item in list'>
          <li>{{item.name}}</li>
          </ul>
        </div>`

    }
    const SetUp = {
      template: `<div>
        <ul class='sb'>
          <router-link tag='li' to='/setUp/xixi'>权限设置</router-link>
          <router-link tag='li' to='/setUp/haha'>公司设置</router-link>
          </ul>
          <div>
            <router-view />
            </div>
        </div>`

    }
    const Xixi = {
      template: `<div>权限设置</div>`
    }
    const Haha = {
      template: `<div>公司设置</div>`
    }
    const router = new VueRouter({
      routes: [
        {
          path: '/',
          component: App,
          redirect: '/homePage',
          children: [
            { path: '/homePage', component: HomePage },
            { path: '/commodity', component: Commodity },
            {
              path: '/setUp',
              component: SetUp,
              redirect: '/setUp/xixi',
              children: [
                { path: '/setUp/xixi', component: Xixi },
                { path: '/setUp/haha', component: Haha },
              ]
            }
          ]
        }
      ]
    })
    const vm = new Vue({
      el: '#app',
      router
    })
  </script>
</body>

</html>